<template>
  <div id="app">
    <!-- router-link类似有a标签 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="'/user/' + userId">用户</router-link>
    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->
    
    <router-view></router-view>
    <!-- 用于告诉我们这些home，about里面的内容放在哪里 -->
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      userId:'summer'
    }
  },
  methods: {
    homeClick() {
      // 通过代码的形式去修改vue-router
      // this.$router.push("/home");
      // 因为整个是一个栈，push，我们会默认选择最上面的那一个
      // 也可以换用replace
      this.$router.replace("/home");
      console.log("homeCLick");
    },
    aboutClick() {
      // this.$router.push("/about");
      this.$router.replace("/about");
      console.log("aboutCLick");
    },
  },
};
</script>

<style scoped>
.router-link-active {
  color: red;
}
</style>
